<!DOCTYPE html>
<html lang="en" id="html_1">
<head>
	<meta charset="UTF-8">
	<title>张培禺的简历</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<style>
		html{
			transition: all .8s;
		}
		.p1{
			color: red;
			margin-top: 50px;
		}
		#right{
			margin-top: 50%;
			width: 50%;
			margin: auto;
			text-align: center;
			height: 100%;
			height: 80%;
			overflow: auto;
			margin-top: 15%;
			/*border: 2px solid #00FF1B;*/
		}
		#blue{
			display: inline-block;
		}
		body, #nr{
			height: 100vh;
			margin: 0;
		}
		.paper{
			position: fixed;
			width: 40%;
			height: 80%;
			background: linear-gradient(to bottom, #f4f39e, #f5da41); 
		    padding: 20px;
		    margin-left: 20px;
		    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.8);
		    text-shadow: 0 1px 0 #F6EF97;
		    margin-top: 3%;
		    float: left;
		}
		.paperAdhesiveTape:after {
		    width: 25%;
		    height: 5%;
		    content: " ";
		    margin-left: -90px;
		    border: 1px solid rgba(200, 200, 200, .8);
		    background: rgba(254, 254, 254, .6);
		    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.1);
		    transform: rotate(-5deg);
		    position: absolute;
		    left: 50%;
		    top: -8px;
		}
		.paper h1{
			margin: 10px 0;
			font-size: 24px
		}
		.paper h2{
			margin: 10px 0;
			font-size: 18px
		}
		@media (max-width: 868px){
			#right{
				width: 100%;
				height: 48%;
				margin: auto;
				float: none;
				margin: 0;
				position: absolute;
			    top: 0;
			    margin-top: 0;
			    padding: 0;
			}
			.paper{
				width: 100%;
				margin: auto;
				float: left;
				position: inherit;
				margin: 0;
				height: 100%;
				position: absolute;
			    top: 50%;
				/*overflow: auto;*/
			}
			.paperAdhesiveTape:after{
				top: -15px;
			}
		}
			button{
				background: #00000000;
				border: 1px solid #fff;
				cursor: pointer;
				position: absolute;
				left: 0;
                z-index: 999999;
				top: 0;
			}
			#jiansu{
				left:45px;
			}
            #tiaoguo{left:90px;}
	</style>
</head>
<body>
	<button id="jasu">加速</button><button id="jiansu">减速</button><button id="tiaoguo">跳过</button>
	<div id="nr"></div>
</body>

<script>


var html_txt = ' <div id="paper"></div><div id="right"><p id="blue">/*你好，我是张培禺，一名前端工程师。<br>请允许我做一个简单的自我介绍，但是纯文字太单调，所以我想来点特别的。<br>首先我准备一下样式。*/</p><p><span id="green">*</span><span id="white">{</span><br><span id="pink">text-align</span><span id="white">: left;</span><br><span id="pink">margin</span><span id="white">: 0;</span><br><span id="pink">padding</span><span id="white">: 0;</span><br><span id="pink">box-sizing</span><span id="white">: border-box;</span><br><span id="white">}</span><br></p><p id="blue">/*白色伤眼睛，来点暗色系的背景吧！*/</p><p><span id="green">html</span><span id="white">{</span><br><span id="pink">background</span><span id="white">: #333034;</span><br><span id="white">}</span><br></p><p id="blue">/*让我们给它加一个边框吧*/</p><p><span id="green">#right</span><span id="white">{</span><br><span id="pink">border</span><span id="white">: 2px solid #00FF1B;</span><br><span id="pink">padding</span><span id="white">: 20px;</span><br><span id="white">}</span><br></p><p id="blue">/*代码看不清楚？来点高亮吧！*/</p><p><span id="green">.green</span><span id="white">{</span><br><span id="pink">color</span><span id="white">: #a6e22e;</span><br><span id="white">}</span><br></p><p><span id="green">.blue</span><span id="white">{</span><br><span id="pink">color</span><span id="white">: #28A79A;</span><br><span id="white">}</span><br></p><p><span id="green">.white</span><span id="white">{</span><br><span id="pink">color</span><span id="white">: #fff;</span><br><span id="white">}</span><br></p><p><span id="green">.pink</span><span id="white">{</span><br><span id="pink">color</span><span id="white">: #f92672;</span><br><span id="pink">margin-left</span><span id="white">: 20px;</span><br><span id="white">}</span><br></p><p id="blue">/*现在开始写简历吧*/</p><br><p id="blue">/*首先我需要一张纸*/</p><p><span id="green">.paper</span><span id="white">{</span><br><span id="pink">width</span><span id="white">: 50%;</span><br><span id="pink">height</span><span id="white">: 200px;</span><br><span id="pink">background</span><span id="white">: linear-gradient(to bottom, #f4f39e, #f5da41); </span><br><span id="pink">padding</span><span id="white">: 20px;</span><br><span id="pink">margin-left</span><span id="white">: 20px;</span><br><span id="pink">box-shadow</span><span id="white">: 0 2px 10px 1px rgba(0, 0, 0, 0.8);</span><br><span id="pink">text-shadow</span><span id="white">: 0 1px 0 #F6EF97;</span><br><span id="pink">margin-top</span><span id="white">: 30%;</span><br><span id="white">}</span><br></p><p id="blue">/*掉下去了！怎么办？*/</p><br><p id="blue">/*没关系，再用胶带粘住它*/</p><p><span id="green">#paper:after</span><span id="white">{</span><br><span id="pink">width</span><span id="white">: 25%;</span><br><span id="pink">height</span><span id="white">: 5%;</span><br><span id="pink">content</span><span id="white">: " ";</span><br><span id="pink">margin-left</span><span id="white">: -90px;</span><br><span id="pink">border</span><span id="white">: 1px solid rgba(200, 200, 200, .8);</span><br><span id="pink">background</span><span id="white">: rgba(254, 254, 254, .6);</span><br><span id="pink">box-shadow</span><span id="white">: 0px 0 3px rgba(0, 0, 0, 0.1);</span><br><span id="pink">transform</span><span id="white">: rotate(-5deg);</span><br><span id="pink">position</span><span id="white">: absolute;</span><br><span id="pink">left</span><span id="white">: 50%;</span><br><span id="pink">top</span><span id="white">:-15px;</span><br><span id="white">}</span><br></p><p><span id="green">#paper</span><span id="white">{</span><br><span id="pink">margin-top</span><span id="white">: 0;</span><br><span id="white">}</span><br></p><br><p id="blue">/*开始写我的个人简历了*/</p><br><p id="blue">/*好了，这个就是我的初步简历了。如果您想要更多了解的话，请在我的码云或博客中浏览我的其他项目！*/</p><br></div>';
var paper_html = '<h1>简历</h1><h2>基本资料</h2><p><strong>姓名：张培禺</strong><br><strong>年龄：19</strong><br><strong>坐标：河北</strong><br><strong>QQ: 2742267796</strong><br><strong>微信：123234901</strong><br><strong>电话：15613791107</strong><br><strong>博客：<a href="http://itzpy.gitee.io/personal_blog/">http://itzpy.gitee.io/personal_blog/index</a></strong><br><strong>码云：<a href="https://gitee.com/itzpy/">https://gitee.com/itzpy</a></strong></p><h2>技能介绍</h2><p>1. HTML/5 <br>2. CSS/3<br>3. JavaScript/jQuery<br>4. ajax<br>5. Vue.js<br>6. git<br>7. ps<br>8. 熟练运用电脑常用办公软件</p>';
function find(str,cha,num){
    var x=str.indexOf(cha);
    for(var i=0;i<num;i++){
        x=str.indexOf(cha,x+1);
    }
    return x;
}
var speed = 80;
// function paper_h(s){
// 	setTimeout(function() {
// 		if(s<=html_txt.length&&s>=0){
// 		    if (html_txt.substring(s,s+1)=='<') {
// 		    	paper_h(s+find(html_txt,'>',daYuXiaoYu)-find(html_txt,'<',daYuXiaoYu));
// 		    	// console.log(find(html_txt,'>',daYuXiaoYu)-find(html_txt,'<',daYuXiaoYu))
// 		    	daYuXiaoYu++;
// 		    }else{
// 		    	paper_h(s+1);
// 		    }
// 		}
// 	}, 0);
// 	// 80就好
// }
var daYuXiaoYu = 0;
var daYuXiaoYu_ = 0;
function bootom_zths(n){
	setTimeout(function() {
		if(n<=html_txt.length+paper_html.length&&n>=0){
		    if (n>find(html_txt,'简历了')+find(paper_html,'<a href="http://itzpy.gitee.io/personal_blog/">') && n<find(html_txt,'简历了')+find(paper_html,'http://itzpy.gitee.io/personal_blog/index')) {
		    	n=n+47;
		    }
		    if (n>find(html_txt,'简历了')+find(paper_html,'<a href="https://gitee.com/itzpy/">') && n<find(html_txt,'简历了')+find(paper_html,'https://gitee.com/itzpy')) {
		    	n=n+35;
		    }
		    if (html_txt.substring(n,n+1)=='<') {
		    	bootom_zths(n+find(html_txt,'>',daYuXiaoYu)-find(html_txt,'<',daYuXiaoYu));
		    	// console.log(find(html_txt,'>',daYuXiaoYu)-find(html_txt,'<',daYuXiaoYu))
		    	daYuXiaoYu++;
		    }else{
		    	bootom_zths(n+1);
		    }
		    // console.log(n)
			document.querySelector('#nr').innerHTML= html_txt.substring(0,n);
		    if (n>find(html_txt,'简历了')) {
		    	// if (paper_html.substring(n-find(html_txt,'简历了'),n+1-find(html_txt,'简历了'))=='<') {
			    // 	console.log(find(paper_html,'>',daYuXiaoYu_)-find(paper_html,'<',daYuXiaoYu_))
			    // 	n=n+find(paper_html,'>',daYuXiaoYu_)-find(paper_html,'<',daYuXiaoYu_)
			    // 	// console.log(find(html_txt,'>',daYuXiaoYu)-find(html_txt,'<',daYuXiaoYu))
			    // 	daYuXiaoYu_++;
			    // }
		    	paper.innerHTML= paper_html.substring(0,n-find(html_txt,'简历了'));
			    	console.log(n)
		    }
		    if (n>find(html_txt,'跳过')) {
				jasu.onclick =function(){
					if (speed>20) {
						speed = speed - 10;
					}
				}
				jiansu.onclick =function(){
					if (speed<1000) {
						speed = speed + 10;
					}
				}
                tiaoguo.onclick = function(){speed=1}
		    }
		    if (n>find(html_txt,'#333034')) {
		    	html_1.style.background="#333034";
		    	jasu.style.color='#fff';
		    	jiansu.style.color='#fff';
		    	tiaoguo.style.color='#fff';
		    }
		    if (n>find(html_txt,'left')) {
		    	right.style.textAlign='left';
		    }
		    if (n>find(html_txt,'margin',"0")) {
		    	if (document.body.clientWidth>860) {
		    		right.style.marginTop='3%';
		    	}else{
		    		right.style.marginTop='0%';
		    	}
		    	right.scrollTop = 100000;
		    }
		    if (n>find(html_txt,'00FF1B')) {
		    	right.style.border='2px solid #00FF1B';
		    }
		    if (n>find(html_txt,'a6e22e')) {
		    	for (var i = 0; i < green.length; i++) {
		    		green[i].style.color='#a6e22e';
		    	}
		    }
		    if (n>find(html_txt,'28A79A')) {
		    	for (var i = 0; i < blue.length; i++) {
		    		blue[i].style.color='#28A79A';
		    	}
		    }
		    if (n>find(html_txt,'fff')) {
		    	for (var i = 0; i < white.length; i++) {
		    		white[i].style.color='#fff';
		    	}
		    }
		    if (n>find(html_txt,'f92672')) {
		    	for (var i = 0; i < pink.length; i++) {
		    		pink[i].style.color='#f92672';
		    	}
		    }
		    if (n>find(html_txt,'20px','0')) {
		    	if (document.body.clientWidth>860) {
		    		right.style.padding='20px';
		    	}else{
		    		right.style.padding='0 0 0 0';
		    	}
		    }
		    if (n>find(html_txt,'20px','1')) {
		    	for (var i = 0; i < pink.length; i++) {
		    		pink[i].style.marginLeft='20px';
		    	}
		    }
		    if (n>find(html_txt,'linear-gradient(to bottom, #f4f39e, #f5da41);')+20) {
		    	paper.classList.add("paper");
		    	if (document.body.clientWidth>860) {
		    		right.style.float='right';
		    		right.style.margin='3% 20px 0 0'
		    	}else{
		    		right.style.float='none';
		    		right.style.margin='0 0 0 0'
		    	}
		    }
		    if (n>find(html_txt,': 30%;')) {
		    	if (document.body.clientWidth>860) {
		    		paper.style.margin='30% 0 0 20px'
		    	}else{
		    		paper.style.margin='30% 0 0 0';
		    	}
		    }
		    if (n>find(html_txt,'4, .6);')) {
		    	paper.classList.add("paperAdhesiveTape"); 
		    }
		    if (n>find(html_txt,': 0;',2)) {
		    	if (document.body.clientWidth>860) {
		    		paper.style.margin='3% 0 0 20px'
		    	}else{
		    		paper.style.margin='0 0 0 0'
		    	}
		    }
		}if(n>=365){
		}
	}, speed);
	// 80就好
}
bootom_zths(0);


</script>

</html>